<script setup>
import { reactive, ref, toRaw, computed,nextTick } from "vue";
import { cloneDeep, debounce, snakeCase, get, set } from "lodash";
import { getfrom } from "./minxin/index.js";
import mangoempty from "@/components/mango_empty/index.vue";
import pagina from "./pagination.vue";
import searchForm from "../searchForm/index.vue";
const props = defineProps({
  listConfig: Object,
  tableData: Array,
  style: Object,
  tableHeigth: {
    type: Number,
  },
});
window.addEventListener("resize", () => {
  debounce(() => {
    handleTableHeight();
  }, 100)();
});

const multipleTableRef = ref();
const tabHeight = ref(500);
const searchref = ref();
setTimeout(() => {
  handleTableHeight();
}, 0);
let tabBox = ref();
const multipleSelection = [];
const emit = defineEmits(["handleAction", "pagination-change"]);
const handleRowClick = (row) => {
  multipleTableRef.value.toggleRowSelection(row, undefined);
};
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
const getParams = () => {
  let params = {};
  searchref.value.getParams((error, formParams) => {
    if (!error) {
      params = formParams;
    }
  });
  return params;
};
const resetSearchForm=()=>{
  searchref.value.resetSearchForm()
}
const handleAction = (command, position, selection, data) => {
  emit(
    "handleAction",
    command,
    position,
    selection,
    toRaw(multipleSelection.value)
  );
};

const handleTableHeight = () => {
  setTimeout(()=>{
  const val=searchref?.value?.isExpand
  console.log(val)
  tabHeight.value =
    document.querySelector(".myview")?.clientHeight -
    document.querySelector(".fromdata")?.clientHeight
     -(val ? 190 : 190);
  if (multipleTableRef.value) {
    multipleTableRef.value.doLayout();
  }
  },0)
};

const paginationchange = (page) => {
  emit("pagination-change", page);
};
defineExpose({
  getParams,
  resetSearchForm
  // getfromdata,
  // clearfromdata,
});
</script>
<template>
  <div class="mango_crud">
    <div class="fromdata" v-if="props?.listConfig?.searchForm?.forms">
      <el-card>
        <searchForm
          ref="searchref"
          @handleAction="handleAction"
          @resetSearchForm="resetSearchForm"
          @handleExpand="handleTableHeight"
          :forms="props?.listConfig?.searchForm?.forms"
          :toolbars="props?.listConfig?.searchForm.toolbars"
        ></searchForm>
      </el-card>
    </div>
    <div class="tabledata">
      <el-card :style="props.style">
        <el-form>
          <el-form-item v-if="props?.listConfig?.operatebtn">
            <el-button
              v-for="(btn, i) in props.listConfig.operatebtn"
              :key="i"
              :type="btn.type ? btn.type : 'primary'"
              @click="handleAction(btn.key)"
            >
              <span v-if="btn.key == 'search'">搜索</span>
              <span v-else>{{ btn.label }}</span>
            </el-button>
          </el-form-item>
        </el-form>

        <div class="tabBox" ref="tabBox">
          <el-table
            ref="multipleTableRef"
            :data="props.tableData || heighttab"
            style="width: 100%"
            :height="tabHeight"
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
          >
            <template #empty>
              <mangoempty />
            </template>
            <el-table-column v-if="props.listConfig.showindex" type="index" />
            <el-table-column
              v-if="props.listConfig.showselection"
              type="selection"
              width="55"
            />
            <el-table-column
              v-for="(o, i) in props.listConfig.columns"
              :property="o.property"
              :label="o.label"
              :key="i"
              :formatter="o.formatter"
            >
              <template #default="scope">
                <span v-if="o.slotName">
                  <slot
                    :name="o.slotName"
                    :row="scope.row"
                    :value="scope.row[o.property]"
                    :column="o"
                    :scope="scope"
                  />
                </span>
                <template v-else-if="o.formatter">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="`${scope.row[o.property]}`"
                    placement="top"
                  >
                    <span class="hidden">
                      {{
                        o.formatter
                          ? o.formatter(
                              scope.row,
                              scope,
                              get(scope.row, o.prop),
                              scope
                            )
                          : get(scope.row, o.prop)
                      }}
                    </span>
                  </el-tooltip>
                </template>

                <span v-else class="hidden">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="`${scope.row[o.property]}`"
                    placement="top"
                  >
                    {{ scope.row[o.property] }}
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
          </el-table>

          <!-- :style="{width:tabBox}" -->
          <pagina
            v-if="props.listConfig?.pagination"
            @pagination-change="paginationchange"
            :pagination="props.listConfig.pagination"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss">
.mango_crud {
  padding: 10px;
  height: 95%;
  .hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fromdata {
    .tools {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-button {
        margin-right: 5px;
      }
    }
    margin-bottom: 10px;
  }
  .el-pagination {
    position: relative;
  }
  .tabledata {
    // height: 89%;
    .el-card {
      height: 100%;
      position: relative;
      .el-card__body {
        height: 100%;
      }
      .tabBox {
        border: 1px solid #ebeef5;
        height: 100%;
      }
    }

    .el-table--fit {
      margin-bottom: 5px;
    }
    .el-table__inner-wrapper::before {
      display: none;
    }
  }
}
</style>
